<template>
  <div class="tops">
    <div class="top">
      <div style="display: flex; padding-left: 20px; vertical-align: middle">
        <p>
          <el-popover
            popper-class="popoverBackB"
            placement="bottom"
            trigger="click"
            width="80"
            v-model="visible"
          >
            <div style="cursor: pointer">
              <p
                @click="singleDialogVisible = !singleDialogVisible"
                style="margin-bottom: 10px"
              >
                个人信息
              </p>
              <p @click="pwdDialogVisible = !pwdDialogVisible">修改密码</p>
            </div>
            <div slot="reference" style="display: flex">
              <img
                :src="headrImg == null ? imgSrc : headrImg"
                alt=""
                style="
                  border-radius: 50%;
                  width: 40px;
                  height: 40px;
                  margin-right: 10px;
                "
              />
              <p>{{ name }}</p>
            </div>
            <!-- <el-button slot="reference">click 激活</el-button> -->
          </el-popover>
        </p>
      </div>
      <div style="display: flex">
        <img src="@/static/img/top/pic.png" alt="" />
        <h1 style="margin-left: 10px">廊坊市公安局校灵通服务</h1>
      </div>
      <div style="position: relative; right: 20px">
        <!-- <img
          style="width: 40px; margin-right: 10px"
          src="@/assets/pagesImg/6654.png"
          alt=""
          
        /> -->
        <!-- <img src= alt="" /> -->

        <img
          style="width: 40px"
          src="@/assets/pagesImg/6656.png"
          alt=""
          @click="loginOUT"
        />
      </div>
    </div>
    <div id="logout">
      <el-dialog
        title="退出登录"
        :visible.sync="outDialogVisible"
        width="30%"
        :before-close="handleCloseOut"
        id="out"
      >
        <span>您确定要退出登录吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="outDialogVisible = false" class="cancel"
            >取 消</el-button
          >
          <el-button type="primary" @click="out" class="confrim"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 个人信息 -->
      <el-dialog
        title="个人信息"
        :visible.sync="singleDialogVisible"
        width="30%"
        :before-close="handleClose"
        id="out"
      >
        <div>
          <!-- 修改头像 -->
          <el-upload
            ref="upload"
            class="avatar-uploader"
            action="http://120.211.58.75:50003/admin.index/changeAvatar"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :data="img"
            :show-close="true"
          >
            <img src="../assets//pagesImg/" alt="" srcset="" />
            <img
              :src="headrImg == '' || headrImg == null ? imgSrc : headrImg"
              alt=""
              srcset=""
              style="width: 80px; height: 80px; border-radius: 50%"
              @click="changeHeadrImg"
            />
          </el-upload>

          <p>{{ name }}</p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="singleDialogVisible = false" class="cancel"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="singleDialogVisible = false"
            class="confrim"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 修改密码 -->
      <el-dialog
        title="密码修改"
        :visible.sync="pwdDialogVisible"
        width="30%"
        :before-close="handleCloseReset"
        id="out"
      >
        <div>
          <!-- 修改密码 -->
          <el-form>
            <p class="reset">
              <span>原密码:</span>
              <el-input
                placeholder="请输入原密码"
                type="password"
                autocomplete="off"
                v-model="ruleForm.password"
                style="width: 86%"
                show-password
              >
              </el-input>
            </p>
            <p class="reset">
              <span>新密码:</span>
              <el-input
                placeholder="请输入新密码"
                type="password"
                autocomplete="off"
                v-model="ruleForm.password1"
                style="width: 86%"
                show-password
              >
              </el-input>
            </p>
            <p class="reset">
              <span>新密码:</span>
              <el-input
                placeholder="请再次输入新密码"
                type="password"
                autocomplete="off"
                v-model="ruleForm.password2"
                style="width: 86%"
                show-password
              >
              </el-input>
            </p>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="pwdDialogVisible = false" class="cancel"
            >取 消</el-button
          >
          <el-button type="primary" @click="resetPwd" class="confrim"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
// import bus from "../common/bus";
import VueCookie from "vue-cookies";
import { changePwd, center } from "@/api/police";
// import VueCookie from "vue-cookies";
export default {
  name: "APP",
  components: {},
  data() {
    return {
      visible: false,
      dialogVisible: false,
      outDialogVisible: false,
      singleDialogVisible: false,
      pwdDialogVisible: false,
      headrImg: "",
      name: "",
      imgSrc: require("@/static/img/top/visitor.png"),
      ruleForm: {
        password1: "",
        password2: "",
        password: "",
        // code: "", 123456   xiaolingtong
      },
      fileList: [],
      img: {
        token: "",
        avatar: "",
      },
      datas: {
        token: "",
      },
    };
  },
  mounted() {
    this.initCenter();
  },

  methods: {
    initCenter() {
      this.datas.token = JSON.parse(localStorage.getItem("userInfo")).token;
      // console.log(this.$VueCookies.get("token"));
      console.log(JSON.parse(localStorage.getItem("userInfo")).token);
      center(this.datas).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.headrImg = res.data.avatar;
          this.name = res.data.user_name;
        } else if (res.code == 401) {
          alert(res.message);
        }
      });
    },
    out() {
      // 确定退出
      // let ab = false;
      // bus.$emit("outConfirm", ab);
      this.outDialogVisible = false;
      VueCookie.remove("token");
      localStorage.removeItem("userInfo");
      localStorage.removeItem("MenuList");
      localStorage.removeItem("activeIndex");
      this.$router.push("/");
    },
    handleClose() {
      this.singleDialogVisible = false;
    },
    handleCloseOut() {
      this.outDialogVisible = false;
    },
    handleCloseReset() {
      this.pwdDialogVisible = false;
    },
    loginOUT() {
      this.outDialogVisible = true;
      // console.log("退出");
      // bus.$emit("out", this.outDialogVisible);
    },
    changeHeadrImg() {},
    resetPwd() {
      // this.pwdDialogVisible = false
      this.ruleForm.token = this.$VueCookies.get("token");
      // console.log(this.ruleForm);
      changePwd(this.ruleForm).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          alert(res.message);
          this.$router.push("/");
        } else if (res.code == 400) {
          alert(res.message);
        }
      });
      this.pwdDialogVisible = false;
      this.ruleForm = {
        password1: "",
        password2: "",
        password: "",
        // code: "", 123456   xiaolingtong
      };
    },

    beforeAvatarUpload(file) {
      let that = this;
      let data = {};
      that.img.token = that.$VueCookies.get("token");
      // console.log(file.base64);
      // console.log(file);
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          // console.log(reader.result);
          that.img.avatar = reader.result;
          that.headrImg = reader.result;
          // file.base64 = reader.result;
          // console.log(that.img);
          data = that.img;
          // console.log(data);
          resolve(data);
        };
        reader.onerror = (error) => reject(error);
      });
    },
    handleAvatarSuccess(res) {
      // console.log(res);
      if (res.code == 200) {
        alert(res.message);
        center(this.datas).then((res) => {
          // console.log(res);
          if (res.code == 200) {
            this.headrImg = res.data.avatar;
            this.name = res.data.username;
          } else if (res.code == 401) {
            alert(res.message);
          }
        });
      }
    },
  },
  created() {},
};
</script>
<style  scoped lang="scss">
.reset {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.reset span {
  display: block;
  margin-right: 10px;
}
.top {
  cursor: pointer;
  height: 100%;
  background-color: #126bff;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  color: white;
  height: 60px;
}
.top div {
  height: 40px;
  line-height: 40px;
}
::v-deep.el-range-editor--medium .el-range-separator {
  line-height: 21px;
  font-size: 14px;
  position: relative;
  top: 4px !important;
}
#logout {
  /deep/.el-dialog {
    border-radius: 15px;
  }
  /deep/.el-dialog__wrapper {
    position: fixed;
    top: 185px;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    height: 500px !important;
  }
}
/deep/.cancel {
  width: 79px;
  height: 36px;
  background: #e6effa;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: none;
  color: #126bff;
  margin-right: 15px;
}
/deep/.confrim {
  width: 79px;
  height: 36px;
  background: #126bff;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  color: #ffffff;
  border: none;
}
</style>
